import { PropsWithChildren } from "react";
import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";

export type Props = PropsWithChildren<{
  /** 容器样式 */
  style?: StyleProp<ViewStyle>;

  /** 位置 */
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
}>;

/** 全屏覆盖容器 */
const CoverContent = (props: Props) => {
  const postStyles: ViewStyle = {};

  switch (props.position) {
    case "top-left":
      postStyles.top = 10;
      postStyles.left = 10;
      break;
    case "top-right":
      postStyles.top = 10;
      postStyles.right = 10;
      break;
    case "bottom-left":
      postStyles.bottom = 10;
      postStyles.left = 10;
      break;
    case "bottom-right":
    default:
      postStyles.bottom = 10;
      postStyles.right = 10;
      break;
  }

  return <View style={[styles.container, postStyles, props.style]}>{props.children}</View>;
};

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    zIndex: 9999
  }
});

export default CoverContent;
